<template>
    <div class="content">
        <van-nav-bar title="商家申请" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-form @submit="onSubmit" style="margin-top: 1rem;" v-if="!hasSubmit">
            <van-cell-group inset>
                <div style="display:flex;margin-top: 1rem;">
                    <van-image width="5rem" height="5rem" fit="cover" style="position:relative;left:2rem;"
                        :src="form.spicture" />
                    <label for="file" style="position:relative;left:10rem;top:2rem;display: flex; background-color: rgb(79, 152, 122);color:#fff;
                align-items: center; height: 2rem;border-radius: 0.5rem;">
                        上传店铺图片
                    </label>
                    <input type="file" id="file" class="sr-only" accept="image/png,image/jpeg,image/jpg"
                        @change="uploadImage($event.target.files)" style="display: none;" />
                </div>
                <van-field v-model="form.sname" name="sname" label="店铺名称" placeholder="请填写店铺名称"
                    :rules="[{ required: true, message: '请填写店铺名称' }]" />
                <van-field v-model="form.screatetime" name="screatetime" label="注册时间" placeholder="请填写注册时间"
                    :rules="[{ required: true, message: '请填写注册时间' }]" disabled />
                <van-field v-model="form.sintroduction" name="sintroduction" label="店铺简介" placeholder="请填写店铺简介"
                    :rules="[{ required: true, message: '请填写店铺简介' }]" />
                <van-field v-model="form.sowner" name="sowner" label="店主姓名" placeholder="请填写店主姓名"
                    :rules="[{ required: true, message: '请填写店主姓名' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    申请
                </van-button>
            </div>
        </van-form>
        <div v-else class="success">
            <van-icon name="wechat-pay" size="50" />
            <div>恭喜您申请成功</div>
            <div class="code">您的店铺代码是</div>
            <div class="sixcode">{{ form.ssixcode }}</div>
        </div>
    </div>
</template>
  
<script setup>
import { ref } from 'vue'
import { uploadFile } from "@/utils/upload";
import { dateFormat } from '@/utils/time'
import { ImgUrl } from '@/constant.ts'
const userInfoCookie = useCookie('userInfo')
const onClickLeft = () => history.back();
const form = ref({
    sname: '',
    screatetime: dateFormat("YYYY-mm-dd", new Date()),
    spicture: '',
    sintroduction: '',
    suid: 0,
    sstatus: 1,
    ssixcode: '',
    sowner: ''
})
const onSubmit = async (values) => {
    form.value.suid = userInfoCookie.value.uid
    // console.log('submit', form.value);
    form.value.ssixcode = String((new Date()).getTime()).substr(7, 6)
    setTimeout(() => {
        hasSubmit.value = true
    }, 1000);
    const { data } = await myUseFetch('/applyshop', { method: 'post', body: form.value })
    // console.log(data.value)
};
const hasSubmit = ref(false)
async function init() {
    const isShop = useUserStateIsShop()
    if (isShop .value!= '') {
        hasSubmit.value = true
        form.value.ssixcode = isShop
        return
    }
    let shop = {
        suid: userInfoCookie.value.uid
    }
    const { data } = await myUseFetch('/getcodebyuid', { method: 'post', body: shop })
    let res = data.value
    if (res.code == -1) {
        console.log(res)
    } else if (res.code == 0) {
        hasSubmit.value = true
        form.value.ssixcode = res.data
        isShop.value = res.data
    }
}
init()
function uploadImage(files) {
    // console.log(files)
    if (files.length > 0) {
        uploadFile(files[0]).subscribe({
            next: (result) => {
                console.log(result)
            },
            error: (err) => {
                console.log(err)
            },
            complete: (e) => {
                let link = ImgUrl + e.key
                console.log(link)
                form.value.spicture = link
            },
        });
    }
}

</script>
  
<style scoped lang="scss">
.content {
    height: 100vh;
    background-color: rgb(240, 236, 236);

    .success {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        top: 5rem;

        .code {
            margin-top: 2rem;
        }

        .sixcode {
            font-size: 30px;
            font-weight: bold;
            color: green;
            margin-top: 1rem;
        }
    }
}
</style>